<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>添加项目</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" :label-width="formLabelWidth">
              <el-input v-model="form.proName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属城市" :label-width="formLabelWidth">
              <el-cascader
                :options="options"
                :show-all-levels="false"
                @change="handleChange"
                v-model="value"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属钢厂" :label-width="formLabelWidth">
              <el-select v-model="form.proFactoryId" placeholder="请选择钢厂">
                <el-option
                  v-for="(item, index) in optiondata"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="热试时间" :label-width="formLabelWidth">
              <el-date-picker
                v-model="form.proLinTestTime"
                type="datetime"
                placeholder="选择时间"
                align="right"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="系统介绍——单位业务范围"
          :label-width="formLabelWidth"
        >
          <editor id="proBusinessArea" ref="proBusinessArea"></editor>
        </el-form-item>
        <el-form-item label="系统介绍——系统配置" :label-width="formLabelWidth">
          <editor
            id="proSystemConfiguration"
            ref="proSystemConfiguration"
          ></editor>
        </el-form-item>
        <el-form-item label="系统介绍——功能简介" :label-width="formLabelWidth">
          <editor id="proFunctionSummary" ref="proFunctionSummary"></editor>
        </el-form-item>
        <el-form-item
          label="产线简介——产线工艺介绍/产品大纲"
          :label-width="formLabelWidth"
        >
          <editor id="proLinIntroduction" ref="proLinIntroduction"></editor>
        </el-form-item>
        <el-form-item
          label="产线简介——产品大纲"
          :label-width="formLabelWidth"
          v-show="false"
        >
          <editor id="proLinOutline" ref="proLinOutline"></editor>
        </el-form-item>
        <el-form-item label="产线简介——设备特点" :label-width="formLabelWidth">
          <editor id="proLinFeature" ref="proLinFeature"></editor>
        </el-form-item>
        <el-form-item label="产线简介——标志事件" :label-width="formLabelWidth">
          <editor id="proLinMarkEvent" ref="proLinMarkEvent"></editor>
        </el-form-item>
        <el-form-item label="主要成果" :label-width="formLabelWidth">
          <editor id="proOutcome" ref="proOutcome"></editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即添加</el-button>
          <el-button @click="rembefore">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import editor from '@/components/Editor.vue'
import api from '@/api'
export default {
  components: {
    editor,
  },
  data() {
    return {
      value: [],
      options: [],
      formLabelWidth: '180px',
      optiondata: [],
      form: {
        proBusinessArea: '',
        proCity: '',
        proFactoryId: '',
        proFunctionSummary: '',
        proLatitude: '000', //维度
        proLinFeature: '',
        proLinIntroduction: '',
        proLinMarkEvent: '',
        proLinOutline: '',
        proLinTestTime: '',
        proLongitude: '00', //经度
        proName: '',
        proOutcome: '',
        proSystemConfiguration: '',
      },
    }
  },
  methods: {
    //日期转化
    formatTime(number, format) {
      var formateArr = ['Y', 'M', 'D', 'h', 'm', 's']
      var returnArr = []
      var date = new Date(number)
      returnArr.push(date.getFullYear())
      returnArr.push(this.formatNumber(date.getMonth() + 1))
      returnArr.push(this.formatNumber(date.getDate()))
      returnArr.push(this.formatNumber(date.getHours()))
      returnArr.push(this.formatNumber(date.getMinutes()))
      returnArr.push(this.formatNumber(date.getSeconds()))

      for (var i in returnArr) {
        format = format.replace(formateArr[i], returnArr[i])
      }
      return format
    },
    //数据转化
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    },
    handleChange(value) {
      this.form.proCity = value[1]
    },
    async getCityinfo() {
      let res = await api.getProdinfo.getCity()
      if (res.data.data.length === 0) {
        this.$message('暂无城市信息')
      } else {
        let result = res.data.data
        this.options = result
      }
    },
    async onSubmit() {
      let _self = this
      this.form.proLinTestTime = this.formatTime(
        this.form.proLinTestTime,
        'Y/M/D h:m:s'
      )
      this.form.proBusinessArea = this.$refs.proBusinessArea.editorContent
      this.form.proSystemConfiguration = this.$refs.proSystemConfiguration.editorContent
      this.form.proFunctionSummary = this.$refs.proFunctionSummary.editorContent
      this.form.proOutcome = this.$refs.proOutcome.editorContent
      this.form.proLinIntroduction = this.$refs.proLinIntroduction.editorContent
      this.form.proLinOutline = this.$refs.proLinOutline.editorContent
      this.form.proLinFeature = this.$refs.proLinFeature.editorContent
      this.form.proLinMarkEvent = this.$refs.proLinMarkEvent.editorContent
      let data = _self.form
      if (data.proName === '' && data.proLinTestTime.includes('NaN')) {
        this.$message({
          message: '项目名称与热试时间为必填',
          type: 'warning',
        })
        return
      }
      let res = await api.getProdinfo.addproinfo(data)
      if (res.data !== null) {
        _self.$message({
          message: '添加成功！',
          type: 'success',
        })
        _self.$router.push({
          name: 'ShowProdinfo',
        })
      } else {
        _self.$message({
          message: '添加失败！',
          type: 'warning',
        })
        return
      }
    },

    //钢厂信息
    async getinfo() {
      let _self = this
      try {
        let res = await api.steelInfo.getsteelinfo()
        let result = res.data.data
        for (let i = 0; i < result.length; i++) {
          _self.optiondata.push({
            id: result[i].id,
            name: result[i].factoryName,
          })
        }
      } catch (error) {
        _self.$message({
          message: '服务器错误',
          type: 'warning',
        })
      }
    },
    rembefore() {
      this.$router.push({
        name: 'ShowProdinfo',
      })
    },
  },
  mounted() {
    // this.getinfo();
    // this.getCityinfo()
  },
}
</script>

<style>
.mL20 {
  margin-left: 20px;
}
</style>
